<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>系统登陆</title>
    <link rel="stylesheet" href="./css/mdui.css">

    <!-- 重写样式 -->
    <style>
        .mdui-row,
        [class*="mdui-row-"] {
            margin-right: 0px;
            margin-left: -8px;
        }
        
        #valid-style .mdui-textfield {
            position: relative;
            padding-top: 16px;
            padding-bottom: 8px;
            overflow: visible;
        }
        
        @media (min-width: 1024px) {
            .mdui-col-md-10 {
                float: none;
                width: 83.333333%;
            }
            .login-card {
                width: 40%;
                margin-top: 5%;
            }
            .valid {
                margin-left: 56px;
            }
        }
    </style>
</head>

<body class="mdui-appbar-with-toolbar mdui-color-grey-50">
    <!-- 顶部导航栏 -->
    <header class="mdui-container-fluid">
        <div class="mdui-appbar mdui-appbar-fixed mdui-appbar-scroll-toolbar-hide">
            <div class="mdui-toolbar mdui-color-deep-purple">
                <a href="javascript:;" class="mdui-btn mdui-btn-icon" mdui-drawer="{target: '#left-drawer'}"><i class="mdui-icon material-icons">menu</i></a>
                <a href="javascript:;" class="mdui-typo-title">操作系统学习平台</a>
                <div class="mdui-toolbar-spacer"></div>
                <a href="javascript:;" mdui-menu="{target: '#login-menu'}" class="mdui-btn mdui-btn-icon">
                    <i class="mdui-icon material-icons">account_circle</i>
                </a>
                <!-- 小菜单 -->
                <ul class="mdui-menu" id="login-menu">
                    <li class="mdui-menu-item">
                        <a href="javascript:;" class="mdui-ripple">登陆</a>
                    </li>
                    <li class="mdui-menu-item">
                        <a href="javascript:;" class="mdui-ripple" mdui-dialog="{target: '#login-help'}">帮助</a>
                    </li>
                    <li class="mdui-divider"></li>
                    <li class="mdui-menu-item">
                        <a href="javascript:;" class="mdui-ripple">关于</a>
                    </li>
                </ul>
            </div>
        </div>
    </header>
    <!-- 顶部导航栏结束 -->

    <!-- 登陆框 -->
    <main class="mdui-container mdui-m-t-4">
        <!-- 定义一个卡片 -->
        <content class="mdui-center login-card mdui-card mdui-hoverable">
            <!-- 标题区域 -->
            <div class="mdui-card-media">
                <img src="https://pic.superbed.cn/item/5cad83ad3a213b0417f931d9" />

                <!-- 卡片中可以包含一个或多个菜单按钮 -->
                <div class="mdui-card-menu">
                    <button class="mdui-btn mdui-btn-icon mdui-text-color-white"><i class="mdui-icon material-icons" mdui-dialog="{target: '#login-help'}">help</i></button>
                </div>
                <!-- 覆盖层 -->
                <div class="mdui-card-media-covered">
                    <div class="mdui-card-primary mdui-text-center">
                        <div class="mdui-card-primary-title mdui-center">
                            <button class="mdui-btn mdui-btn-icon mdui-ripple">
                                    <img class="mdui-img-circle" src="./images/school-logo.gif" />
                            </button>
                        </div>
                        <div class="mdui-card-primary-title mdui-center">操作系统学习平台登陆</div>
                    </div>
                </div>
            </div>
            <!-- 标题区域结束 -->

            <!-- 学号填写框 -->
            <div class="mdui-row">
                <div class="mdui-col-md-10 mdui-center">
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <i class="mdui-icon material-icons">person</i>
                        <label class="mdui-textfield-label">学号</label>
                        <input id="student-id" class="mdui-textfield-input" type="text" maxlength="20" required/>
                        <div class="mdui-textfield-error">学号不能为空</div>
                    </div>
                </div>
            </div>
            <!-- 密码填写框 -->
            <div class="mdui-row">
                <div class="mdui-col-md-10 mdui-center">
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <i class="mdui-icon material-icons">lock</i>
                        <label class="mdui-textfield-label">密码</label>
                        <input class="mdui-textfield-input" type="password" maxlength="20" required/>
                        <div class="mdui-textfield-error">密码不能为空</div>
                    </div>
                </div>
            </div>
            <!-- 验证码填写 -->
            <div id="valid-style" class="mdui-row">
                <div class="mdui-col-md-10 mdui-center">
                    <div class="mdui-textfield mdui-textfield-floating-label">
                        <i class="mdui-icon material-icons">verified_user</i>
                        <div id="c1" class="valid"></div>
                    </div>
                </div>
            </div>

            <!-- 卡片的按钮 -->
            <div class="mdui-card-actions mdui-m-t-4 mdui-m-b-1">
                <div class="mdui-col-xs-3">
                    <select class="mdui-select " mdui-select="{position: 'top'}">
                                        <option value="1">学生</option>
                                        <option value="2">教师</option>
                                        <option value="3">管理员</option>
                        </select>
                </div>
                <a href="./Student/index.html">
                    <button class="mdui-btn mdui-ripple mdui-color-pink mdui-float-right">登陆</button>
                </a>


            </div>
        </content>


    </main>

    <!-- 帮助页面信息 -->
    <div class="mdui-dialog" id="login-help">
        <div class="mdui-dialog-title">帮助页面</div>
        <div class="mdui-dialog-content">

            这里是帮助页面的内容，超出高度可以滚动。
            <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test
        </div>
        <div class="mdui-dialog-actions">
            <button class="mdui-btn mdui-ripple" mdui-dialog-close>知道了</button>
        </div>
    </div>

    <!-- 左侧侧边栏 -->
    <main-left class="">
        <!-- 抽屉栏 -->
        <nav class="mdui-drawer mdui-drawer-close " id="left-drawer">
            <ul id="mdui-menu-left-list" mdui-drawer="{target: '#left-drawer'}" class="mdui-list">
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">input</i>
                    <div class="mdui-list-item-content"> <a href="#">登陆</a> </div>
                </li>
                <li class="mdui-list-item mdui-ripple">
                    <i class="mdui-list-item-icon mdui-icon material-icons">info</i>
                    <div class="mdui-list-item-content">关于</div>
                </li>
            </ul>
        </nav>
    </main-left>



    <!-- 底部页脚 -->
    <footer class="mdui-container-fluid mdui-text-center mdui-m-t-2">
        <div class="mdui-bottom-nav">
            <p class="mdui-ripple mdui-container-fluid mdui-valign">Copyright © 2019 北京交通大学海滨学院</p>
        </div>
    </footer>

    <script src="./js/mdui.js"></script>
    <script src="https://cdn.dingxiang-inc.com/ctu-group/captcha-ui/index.js"></script>
    <script>
        var $$ = mdui.JQ;
        document.getElementById('student-id').focus();
        var myCaptcha = _dx.Captcha(document.getElementById('c1'), {
            appId: '2b13a626135926789794a161aa69e771', //appId，在控制台中“应用管理”或“应用配置”模块获取
            style: 'inline',
            success: function(token) {
                console.log('token:', token)
            }
        })
    </script>
</body>

</html>